<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="back">恢复</a>
</script>
<div style="padding-left: 20px;padding-right: 20px;margin-bottom: 100px">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>菜单管理</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">菜单列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">父菜单添加</div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">父菜单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="menuName" lay-verify="title" autocomplete="off" placeholder="请输入父菜单名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">父菜单路径</label>
                            <div class="layui-input-block">
                                <input type="text" name="menuUrl" autocomplete="off" placeholder="请输入父菜单路径" class="layui-input">
                            </div>
                        </div>
                        <div style="text-align: center">
                            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="addParent">确认添加</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">子菜单添加</div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择父菜单</label>
                            <div class="layui-input-block">
                                <select name="parentId" id="menu" lay-verify="cose" lay-filter="menu">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">子菜单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="menuName" lay-verify="title" autocomplete="off" placeholder="请输入子菜单名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">子菜单路径</label>
                            <div class="layui-input-block">
                                <input type="text" name="menuUrl" autocomplete="off" placeholder="请输入子菜单路径" class="layui-input">
                            </div>
                        </div>
                        <div style="text-align: center">
                            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="addChild">确认添加</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form','table'],function (){
        var form = layui.form,
            table = layui.table;

        table.render({
            elem: '#test'
            , url: '/menu/get'
            , cols: [[
                {type: 'numbers',title:'序号', fixed: 'left'}
                , {field: 'menuName', title: '菜单名称',edit: 'text'}
                , {field: 'parentId', title: '父级ID'}
                , {field: 'menuUrl', title: '菜单Url',edit: 'text'}
                , {field: 'status', title: '状态',templet:function (res) {
                        if(res.status == 1){
                            return "正常"
                        }
                        if(res.status == 0){
                            return "已删除"
                        }
                    }}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]]
            , page: true
        });

        axios.post("/menu/get/parent").then(res => {
            var role = $("#menu");
            role.children().remove();
            role.append('<option value=""></option>')
            for (const op of res.data.data) {
                role.append('<option value="'+op.id+'">'+op.menuName+'</option>')
            }
            form.render();
        })

        form.on('submit(addParent)',function (data) {
            axios.post("/menu/add",data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false;
        })

        form.on('submit(addChild)',function (data) {
            axios.post("/menu/add",data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false;
        })

        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    axios.post("/menu/delete/"+data.id).then(res => {
                        layer.msg(res.data.msg);
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                axios.post("/menu/update",data).then(res => {
                    layer.msg(res.data.msg);
                })
            } else if(obj.event === 'back'){
                axios.post("/menu/back/"+data.id).then(res => {
                    layer.msg(res.data.msg);
                })
            }
        });

        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            },
            cose: function(value){
                if(value.length < 1){
                    return '请选择选项哇';
                }
            }
        });
    })
</script>
</html>
